use chrono::NaiveDate;
use leptos::prelude::*;
use serde_json::Value;
use shq_common::prelude::{AndOr, Direction, FieldType, Size, TreeNode, WhereCause};
use shq_web_controls::{
    DatePicker, Input, InputNumber, InputPrefix, InputSuffix, MonthPicker,
    MultiSelect, Pagination, QuarterPicker, Select, SelectOption, SelectRaw, TimePicker,
    YearPicker,
};
use thaw_utils::ArcOneCallback;
#[component]
pub fn Test4() -> impl IntoView {
    let dval1: RwSignal<Option<NaiveDate>> = RwSignal::new(None);
    let dval2: RwSignal<Option<i32>> = RwSignal::new(None);
    let dval3: RwSignal<Option<i32>> = RwSignal::new(None);
    let dval4: RwSignal<Option<i32>> = RwSignal::new(None);
    let val1: RwSignal<Option<u32>> = RwSignal::new(None);
    let ddval: RwSignal<Option<u32>> = RwSignal::new(Some(11));
    let vals: RwSignal<Vec<u32>> = RwSignal::new(Vec::new());
    let on_select= ArcOneCallback::new(move |val: Option<u32>| {
        ddval.set(val);
    });
    let curr_page = RwSignal::new(1_usize);
    let options = StoredValue::new(vec![
        SelectOption::new("选项11", 11_u32),
        SelectOption::new("选项选项选项选项选项选项选项选项12", 12_u32),
        SelectOption::new("选项13", 13_u32),
    ]);
    let label = move || {
        let val = ddval.get_untracked();
        if let Some(val) = val {
            return options.with_value(|opts| {
                opts.iter()
                    .find(|opt| opt.value == val)
                    .map(|opt| opt.label.clone())
            });
        }
        None
    };
    let order: RwSignal<Option<Direction>> = RwSignal::new(None);
    let filters: RwSignal<WhereCause> =
    RwSignal::new(WhereCause::new("test".to_owned(), AndOr::And));
    let column_name = Signal::derive(move || "test".to_owned());
    let column_label = Signal::derive(move || "测试".to_owned());
    let data_type = Signal::derive(move || FieldType::Int64);
    let tree_opts: Vec<TreeNode> = vec![
        TreeNode::new("1".to_owned(),"选项1".to_owned(), None),
        TreeNode::new("选项11", "11".to_owned(), Some("1".to_owned())),
        TreeNode::new("选项12", "12".to_owned(), Some("1".to_owned())),
        TreeNode::new("选项13", "13".to_owned(), Some("1".to_owned())),
        TreeNode::new("选项2", "2".to_owned(), None),
        TreeNode::new("选项21", "21".to_owned(), Some("2".to_owned())),
        TreeNode::new("选项22", "22".to_owned(), Some("2".to_owned())),
        TreeNode::new("选项23", "23".to_owned(), Some("2".to_owned())),
        TreeNode::new("选项3", "3".to_owned(), None),
        TreeNode::new("选项31", "31".to_owned(), Some("3".to_owned())),
        TreeNode::new("选项32", "32".to_owned(), Some("3".to_owned())),
        TreeNode::new("选项33", "33".to_owned(), Some("3".to_owned())),
    ]
    .into();
    let allow_value = ArcOneCallback::new(move |v: String| {
        if v.is_empty() {
            return true;
        }
        let is_ok = v.chars().all(|c| c.is_ascii_alphabetic());
        is_ok
    });
    let tval1: RwSignal<Value> = RwSignal::new(Value::Null);
    let on_change = move |v: Option<String>| {
        if let Some(v) = v {
            tval1.set(Value::from(v));
        } else {
            tval1.set(Value::Null);
        }
    };
    let tval2: RwSignal<Value> = RwSignal::new(Value::Null);
    let on_change2 = move |v: Option<u32>| {
        if let Some(v) = v {
            tval2.set(Value::from(v));
        } else {
            tval2.set(Value::Null);
        }
    };
    let sv1 = tval1.with_untracked(|v| {
        if *v == Value::Null {
            None
        } else {
            Some(v.to_string())
        }
    });
    let sv2 = tval2.with_untracked(|v| {
        if *v == Value::Null {
            None
        } else {
            if let Some(uv)=v.as_i64(){
                Some(uv as u32)
            }else{
                None
            }
        }
    });
    view! {
        <div class="bg-base-100 flex flex-col gap-2">
            <Input value=sv1 allow_value on_change size=Size::SM>
                <InputPrefix slot>
                    "测试"
                </InputPrefix>
                <InputSuffix slot>
                    "测试2"
                </InputSuffix>
            </Input>
            <InputNumber value=sv2 step=1 on_change=on_change2 size=Size::SM>
                <InputPrefix slot>
                    "测试"
                </InputPrefix>
            </InputNumber>
            <DatePicker value=dval1 size=Size::SM/>
            <YearPicker value=dval2 size=Size::SM/>
            <QuarterPicker value=dval3 size=Size::SM/>
            <MonthPicker value=dval4 size=Size::SM/>
            <TimePicker size=Size::SM/>
            <SelectRaw values=if let Some(val)=ddval.get(){vec![val]}else{vec![]}
                    options=options.get_value()
                    on_select
            >
                    <div class="btn btn-sm">{label}</div>
            </SelectRaw>
            <Select value=val1 options=options.get_value() can_filter=true size=Size::SM/>
            <MultiSelect values=vals options=options.get_value() size=Size::SM/>
            <Pagination page=curr_page page_size=20 total=209/>
        </div>
    }
}
